/**
 * 宁聚未来
 * 
 * */

import React, { useMemo, useState, useCallback,useEffect } from 'react';
import Header from '@/component/layout/Header/Header';
import CommonList from '@/component/common/CommonList/CommonList';
import Qianyan from './Qianyan';
import NingG from './NingG';
import NingLive from './NingLive';
import { getFutureList, getAdvanceList } from '@/network/protocol';
import qs from "querystring";
import { Link } from 'react-router-dom';
import { connect } from "react-redux";
import Cookies from 'js-cookie'
import { configwx } from '@/util/share'

import './style.less';

// 0:宁观点 1：宁Live 0:宁观点 1：宁Live
const img2 = require('../../assests/img/sousuo.png');
const pageSize = 20;

let tabkey = 0;

const NingJu = (props) => {
  const { location } = props;
  const { user } = props;
  const [param, setParam] = useState({pageIndex:1, pageSize,futureTag:tabkey-1})

  // const id = useMemo(() => {
  //   let search = location.search;
  //   if (!search) return;
  //   let str = search.slice(1);
  //   let param = qs.parse(str);
  //   return param.id
  // }, [location.search])

  const [TabKey, setTabKey] = useState(tabkey);

  const View = useMemo(() => {
    return [Qianyan, NingG, NingLive]
  }, [])

  const imgList = useMemo(() => [
    [require('../../assests/img/ningju0-0.png'), require('../../assests/img/ningju0-1.png')],
    [require('../../assests/img/ningju1-0.png'), require('../../assests/img/ningju1-1.png')],
    [require('../../assests/img/ningju2-0.png'), require('../../assests/img/ningju2-1.png')],
  ], [])

  const update = useCallback(() => {
    setParam({...param, pageIndex:param.pageIndex+1})
  }, [param])

  const getListView = useCallback(() => {
    return View[TabKey]
  }, [TabKey, View])

  const setTabF = useCallback((e) => {
    if(TabKey === e) return
    tabkey = e;
    setTabKey(e);
    setParam({...param, futureTag:e-1 })
  }, [TabKey, param])

  // const param = useMemo(() => {
  //   if (TabKey === 1 || TabKey === 2) {
  //     return {
  //       futureTag: TabKey - 1,
  //       pageIndex: 1,
  //       pageSize: 10
  //     }
  //   } else {
  //     return {
  //       pageSize: 10,
  //       pageIndex: 1,
  //     }
  //   }
  // }, [TabKey])

  const method = useMemo(() => {
    return [getAdvanceList, getFutureList, getFutureList][TabKey]
  }, [TabKey])

  const logout1 = useCallback(() => {
    props.logout();
    Cookies.remove('token');
    Cookies.remove('role');
    Cookies.remove('userId');
    Cookies.remove('pwd');

  }, [props])

  useEffect(()=>{
    configwx(
      '豪森药业', '宁聚未来'
    )
  })

  return (
    <>
      <Header
      style={user.role == '3' ?{paddingRight:0}:null}
        center={<span>宁聚未来</span>}
        left={
          user.role == '3' ?
          <span></span>:null
        }
        // right={<img className="icon-header-sousuo" src={img2} alt="" />}
        right={
          user.role == '3' ?
          // <span></span>
          <img className="icon-header-sousuo icon-header-lout" onClick={logout1} src={require('../../assests/img/lout.png')} alt="" />
            :
            <Link to="/search"><img className="icon-header-sousuo" src={img2} alt="" /></Link>
        }

      />
      <div className="global-content NingJu-box">
        <div className="NingJu-content-box">
          <div className="NingJu-tab">
            {imgList.map((item, index) => {
              return <img
                key={'ningimg' + index}
                className={'NingJuimg' + index}
                onClick={() => setTabF(index)}
                src={item[TabKey === index ? 1 : 0]}
                alt="" />
            })}
          </div>
          <div className="NingJu-list">
            <CommonList update={update} viewCmp={getListView()} param={param} method={method} />
          </div>
        </div>
      </div>
    </>
  )
}

const mapStateToProps = state => {
  return {
    user: state.user
  }
}

const mapDispatchToProps = {
  logout: ()=>({type:'LOGOUT'})
}
// export default NingJu

export default connect(mapStateToProps, mapDispatchToProps)(NingJu);